<template>

    <div class="personnel_header">
      <div class="personnel_header_title">广州云为数据科技有限公司</div>
      <div class="personnel_header_subheading">提供员工的联系方式和所在部门</div>
    </div>
    <div class="roleList">

      <div class="roleTree">
        <div class="tree_search">
          <el-input v-model="treeText" @input="enterInput" placeholder="请输入部门搜索" />
        </div>
        <div class="tree_body">
          <el-tree
              :indent="5"
              :default-expand-all="true"
              :data="data"
              ref="treeRef"
              node-key="id"
              :current-node-key="0"
              :props="defaultProps"
              :highlight-current="true"
              :expand-on-click-node="false"
              :filter-node-method="filterNode"
              @node-click="handleNodeClick"
          >
            <template #default="{ node, data }">
        <span class="custom-tree-node">
          <div :class="[settingClass(node)]" v-if="node.level === 1">{{ node.label }}</div>
          <div :class="[settingClass(node)]" v-else>{{ node.label }}</div>
        </span>
            </template>
          </el-tree>
        </div>
      </div>
      <div class="roleList_div">
        <div class="roleList_div_body" ref="roleListDivBody">
          <div>
            <div class="personnel_search" ref="personnelSearch">
              <el-form :inline="true" :model="formInline" class="demo-form-inline">
                <el-form-item label="角色名称：">
                  <el-input v-model="formInline.user" placeholder="请输入姓名" clearable />
                </el-form-item>
                <el-form-item>
                  <el-button type="primary" @click="onSubmit">查询</el-button>
                  <el-button @click="onSubmit">重置</el-button>
                  <el-button type="primary" @click="onSubmit">添加角色</el-button>
                </el-form-item>
              </el-form>
            </div>
            <div class="personnel_list_body" :style="{ height: tableHeight + 'px'}">
              <el-table :data="tableData" border style="width: 100%">
                <el-table-column prop="name" label="角色名称"/>
                <el-table-column prop="name" label="已授权" >
                  <template #default>
                    <div class="bodyView">
                    <el-tag effect="plain" size="large">办理入职</el-tag>
                    <el-tag effect="plain" size="large">办理离职</el-tag>
                    <el-tag effect="plain" size="large">编辑部门信息</el-tag>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column prop="address" label="已绑定人员" >
                    <template #default>
                      <div class="bodyView">
                        <el-tag effect="plain" size="large">测试人员1</el-tag>
                        <el-tag effect="plain" size="large">测试人员3</el-tag>
                        <el-tag effect="plain" size="large">测试人员2</el-tag>
                        <el-tag effect="plain" size="large">测试人员4</el-tag>
                      </div>
                    </template>
                </el-table-column>
                <el-table-column prop="remake" label="备注"  />
                <el-table-column prop="createTime" label="创建时间" />
                <el-table-column fixed="right" label="Operations" width="120">
                  <template #default>
                    <el-button link type="primary" size="small" @click="handleClick">详情</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </div>
            <div class="pagination_body">
              <el-pagination
                  v-model:current-page="currentPage4"
                  v-model:page-size="pageSize4"
                  :page-sizes="[100, 200, 300, 400]"
                  :small="small"
                  :disabled="disabled"
                  :background="background"
                  layout="total, sizes, prev, pager, next, jumper"
                  :total="400"
                  @size-change="handleSizeChange"
                  @current-change="handleCurrentChange"
              />
            </div>
          </div>
        </div>
      </div>
      <div class="operate_div">
        <div class="operate_div_body">
          <el-divider content-position="left">新增角色</el-divider>
          <div style="font-size: 14px;line-height:1.5;color: #ababab;margin-bottom: 15px">在部门的架构下添加新的角色</div>
          <el-button
              type="primary"
              size="large"
              style="width: 100%"
              @click="addRole()">
            新增角色
          </el-button>
          <el-divider content-position="left">部门</el-divider>
          <div style="font-size: 14px;line-height:1.5;color: #ababab;margin-bottom: 15px">快速预览部门组织架构</div>
          <el-button
              type="primary"
              size="large"
              style="width: 100%"
              @click="goOrganizational()">
            部门列表
          </el-button>
          <el-divider content-position="left">权限列表</el-divider>
          <div style="font-size: 14px;line-height:1.5;color: #ababab;margin-bottom: 15px">点击快速查看当前单位有那些权限和权限之间的互斥关系</div>
          <el-button
              type="primary"
              size="large"
              style="width: 100%"
              @click="goPermissions()">
            权限列表
          </el-button>
        </div>
      </div>
    </div>
</template>

<script setup name="personnel">
import {nextTick, reactive, ref} from "vue";
import department from "@/plugins/data/department";
import router from "@/router";
const onSubmit = () => {
  console.log('submit!')
}

const treeText = ref(null)
const treeRef = ref(null)
const enterInput = () => {
  treeRef.value.filter(treeText.value)
}

const addRole = () => {
  router.push('/addRole')
}

const goOrganizational = () => {
  router.push('/organizational')
}

const goPermissions = () => {
  router.push('/permissions')
}

const filterNode = (value, data) => {
  if (!value) return true
  return data.name.includes(value)
}

const tableHeight = ref(0)
const formInline = reactive({
  status: 1,
  userName: null,
  department: null,
  post: null
})

const data = reactive([
  {
    id: 0,
    name: '广州云为数据科技有限公司',
    children: department
  }
])

nextTick(() => {
  treeRef.value.setCheckedKeys([0], true)
})
const tableData =reactive([
  {
    id: 1,
    date: '2016-05-02',
    name: '行政人员',
    empower: [
      {
        name: '撤销部门',
        id: 1,
      },
      {
        name: '合并部门',
        id: 1,
      },
      {
        name: '新增部门',
        id: 1,
      }
    ],
    remake: '这是',
    createTime: '2023-02-09',
  },
  {
    id: 2,
    date: '2016-05-04',
    name: '行政助理',
    empower: [
      {
        name: '查看部门信息',
        id: 1,
      },
      {
        name: '办理入职',
        id: 1,
      },
      {
        name: '办理离职',
        id: 1,
      }
    ],
    remake: '这是行政助理的角色',
    createTime: '2023-02-09',
  },
  {
    id: 3,
    date: '2016-05-01',
    name: '出纳人员',
    remake: '这是',
    createTime: '2023-02-09',
  },
  {
    id: 4,
    date: '2016-05-03',
    name: '人事专员',
    remake: '这是',
    createTime: '2023-02-09',
  },
])


const defaultProps = reactive({
  children: 'children',
  label: 'name',
})

function settingClass (node) {
  console.log(node.level)
  return node.level === 3 ?  'childCLass' :  node.level === 2 ? 'parentClass' : ''
}

function handleNodeClick(data) {
  console.log(data)
}

function handleClick(data) {
  // alert(data)
}

const roleListDivBody = ref(null)
const personnelSearch = ref(null)

// 浏览器窗口大小发生变化时重新计算table的高度
// window.onresize = () => getTableHeight()

function getTableHeight() {
  nextTick(() => {
    tableHeight.value = roleListDivBody.value.clientHeight - personnelSearch.value.clientHeight - 60
  })
}

getTableHeight()
</script>

<style scoped lang="scss">
.personnel_header {
  width: 100%;
  height: 88px;
  margin-bottom: 10px;
  box-sizing: border-box;
  padding: 10px 20px 15px;
  background-color: #ffffff;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);

  .personnel_header_title {
    width: 100%;
    height: auto;
    font-weight: 600;
    font-size: 24px;
    margin-bottom: 10px;

  }

  .personnel_header_subheading {
    width: 100%;
    height: auto;
    color: #ababab;
  }
}
.roleList {
  width: 100%;
  height: calc(100% - 98px );
  display: flex;
  display: -webkit-flex;
  display: -moz-flex;



  .roleTree {
    width: 250px;
    flex-basis: 250px;
    flex-shrink: 0;
    box-sizing: border-box;
    padding: 10px;
    background-color: #ffffff;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);

    .tree_search {
      width: 100%;
      height: 35px;
    }

    .tree_body {
      width: 100%;
      box-sizing: border-box;
      padding-top: 10px;
      height: calc(100% - 35px);
      overflow: auto;
    }
  }

  .roleList_div {
    width: calc(100% - 450px);
    flex-basis: calc(100% - 450px);
    flex-shrink: 0;
    height: 100%;
    box-sizing: border-box;
    padding-left: 10px;
    padding-right: 10px;

    .roleList_div_body {
      width: 100%;
      height: 100%;
      box-sizing: border-box;
      padding: 10px 15px;
      background-color: #ffffff;
      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    }
  }
}

.personnel_list_body {
  width: 100%;
  height: auto;
  overflow: auto;
}

.personnel_list {
  width: 100%;
  height: auto;
  padding: 5px;
  display: flex;
  display: -webkit-flex;
  display: -moz-flex;
  gap: 15px;
  flex-wrap: wrap;
  box-sizing: border-box;

  .onePersonnel {
    width: 350px;
    height: 150px;
    padding: 10px;
    display: flex;
    display: -webkit-flex;
    display: -moz-flex;
    box-sizing: border-box;
    background: #ffffff;
    cursor: pointer;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    transition: box-shadow 0.5s;

    &:hover {
      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.3);
    }

    .onePersonnel_img {
      width: 100px;
      height: auto;
      flex-basis: 100px;
      flex-shrink: 0;
      box-sizing: border-box;
      padding-top: 10px;
      //background: #a4a4a4;

      & > img {
        width: 100%;
        height: auto;
      }
    }

    .personnel_content {
      width: 230px;
      flex-basis: 230px;
      flex-shrink: 0;
      box-sizing: border-box;
      padding-left: 20px;
      padding-top: 15px;

      .personnel_content_li {
        width: 100%;
        height: auto;
        overflow: hidden;
        white-space: nowrap;
        font-size: 14px;
        color: rgb(48, 49, 51);
        margin-bottom: 20px;
      }
    }
  }

  .onePersonnel_woman {
    border-top:10px solid pink;
  }

  .onePersonnel_man {
    border-top:10px solid deepskyblue;
  }
}

.parentClass {
  width: 100%;
  height: auto;
  box-sizing: border-box;
  padding: 5px 20px 5px 0;
  //border-bottom: 1px solid rgb(64, 158, 255);
}


.childCLass {
  width: 100%;
  height: auto;
  box-sizing: border-box;
  padding: 5px 10px 5px 10px;
  //border-bottom: 1px solid rgb(64, 158, 255);
  border-left: 1px solid #6a6666;
}

.pagination_body {
  width: 100%;
  height: 40px;
  display: flex;
  align-content: center;
  justify-content: flex-end;
}

.bodyView {
  width: 100%;
  height: auto;
  display: flex;
  display: -webkit-flex;
  display: -moz-flex;
  gap: 10px;
  flex-wrap: wrap;
}
.operate_div {
  width: 200px;
  height: 100%;
  flex-basis: 200px;
  flex-shrink: 0;

  .operate_div_body {
    width: 100%;
    height: auto;
    box-sizing: border-box;
    padding: 10px 15px 20px;
    background-color: #ffffff;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  }
}
</style>